<!DOCTYPE html>
<%@page import="java.util.ArrayList"%>
<%@page import="mwa.cs.model.Reader"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<%@include file="headScriptRC.jsp"%>
<script type="text/javascript" src="../assets/js/rc/cs53000script.js"></script>
<script>
	var vaStatus = '${vaFindStatus}';
	var vaCurrentDate = '${vaCurrentDate}';
	var vnSumTotal = '${vnSumTotal}';
	var vnVatTotal = '${vnVatTotal}';
</script>
</head>
<body>
	<input type="hidden" id="url_address" name="url_address" value="">
	<input type="hidden" id="agent_browser" name="agent_browser" value="">
	<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
			<!-- End side-menu-->
			<div class="col-sm-12 col-xs-12" id="right-side">
				<div id="navigator-bar"> 
					<i class="fa fa-home"></i> หน้าหลัก <i class="fa fa-angle-right ml-5 mr-5"></i> ยกเลิกใบเสร็จรับเงิน
				</div>
				<!--End navigator-bar-->
				<div>
					<div id="page-header" class="clearfix">
						<div>ยกเลิกใบเสร็จรับเงิน</div>
					</div>
					<div class="alert alert-danger" style="display: none" id="alert-box">
						<span class="fa-stack fa-lg"> 
							<i class="fa fa-circle fa-stack-2x"></i> 
							<i class="fa fa-times fa-stack-1x fa-inverse"></i>
						</span> กรุณากรอกเหตุผลของการยกเลิกการรับเงิน
					</div>
					<div class="form-detail clearfix" style="margin-bottom: -130px;">
						<form class="form-inline" role="form">
							<div style="text-align: right">
								<div class="form-group clearfix ml-10">
									<label for="putSerialNumber">เลขที่ใบเสร็จรับเงิน : </label> 
									<input type="text" class="form-control" id="putSerialNumber" placeholder="เลขที่ใบเสร็จรับเงิน" onkeypress="return Enter(event);">
									<button type="button" class="btn btn-primary" onclick="searchSerialNumber();"><i class="fa fa-search"></i> ค้นหาข้อมูล </button>
								</div>
							</div>
						</form>
					</div>
					<!-- End form-detail -->
					<div class="form-detail clearfix" style="margin-bottom: -100px">
						<form class="form-horizontal" role="form">
							<fieldset class="inner">
								<legend>แบบฟอร์มยกเลิกข้อมูลการรับเงิน</legend>
								<div class="row">
									<div class="col-sm-6"><strong>เลขที่ใบเสร็จรับเงิน</strong> : <span id="serialNumber"></span></div>
									<div class="col-sm-6"><strong>ทะเบียนผู้ใช้น้ำ</strong> : <span id="account"></span></div>
								</div>
								<div class="row mt-10">
									<div class="col-sm-6"> <strong>ชื่อผู้ชำระเงิน</strong> : <span id="payerName"></span></div>
								</div>
								<div class="row mt-10">
									<div class="col-sm-12"><strong>ที่อยู่ผู้ชำระเงิน</strong> : <span id="payerAddress"></span></div>
								</div>
								<div class="row mt-10">
									<div class="col-sm-3"> <strong>เหตุผลการยกเลิก</strong><span class="comment">*</span> : </div>
									<div class="col-sm-8">
										<textarea type="text" class="form-control" rows="3" id="rcReason"></textarea>
									</div>
								</div>
							</fieldset>
						</form>
					</div>
					<div class="form-detail">
						<div class="list-detail-area">
							<div class="row">
								<div class="col-sm-6" style="font-size: 1.2em"> จำนวน <span class="comment" id="listAmount"></span> รายการ</div>
							</div>
							<table class="table-list" id="tabelRcTransD">
								<thead>
									<tr>
										<th width="10%">ลำดับที่</th>
										<th width="40%">รายการ</th>
										<th width="15%">จำนวน</th>
										<th width="15%">ภาษี</th>
										<th width="20%">จำนวนเงินรวม</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
							<table class="table-list" style="margin-top:0px">
								<tr>
									<td width="80%" colspan="4" style="text-align:right; border-top-color: #EFFBEF;">
										<input type="text" value="ค่าปรับ" size="10" style="text-align: right; padding: 3px" disabled="disabled" />
									</td>
									<td width="20%" style="text-align:right; border-top-color: #EFFBEF;" class="highlight-blue-2"><span id="penalty"></span></td>
								</tr>
								<tr>
									<td width="80%" colspan="4" style="text-align: right">รวม</td>
									<td width="20%" style="text-align: right" class="highlight-blue-2"><span id="totalAll"></span></td>
								</tr>
							</table>
						</div>
						<!-- list-detail-area-->
						<hr />
						<div class="text-center">
							<button type="button" class="btn btn-primary" onclick="confirm();"><i class="fa fa-floppy-o"></i> บันทึก</button>
							<button type="button" class="btn btn-primary" onclick="window.location.reload();"><i class="fa fa-refresh"></i> เริ่มใหม่</button>
						</div>
					</div>
					<!-- End Form-list -->
				</div>
				<!-- End detail-area -->
				<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย
					การประปานครหลวง</div>
			</div>
		</div>
		<!-- End Detail-area-->
	</div>
	<!-- End Wrapper -->
	<!-- Dialog Show เมื่อผู้ใช้งานไม่กรอกข้อมูลเลขที่ใบเสร็จรับเงิน -->
		<div class="modal fade" id="nullSerialNemberModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">ตรวจสอบข้อมูลให้ถูกต้อง</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"><i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>
						กรุณากรอกข้อมูลเลขที่ใบเสร็จรับเงิน</div>
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="getFocus();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Dialog Show เมื่อค้นหาไม่พบข้อมูลเลขที่ใบเสร็จ ที่ต้องการจะยกเลิก -->
		<div class="modal fade" id="failResultModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">ผลการค้นหาข้อมูล</h4>
					</div>
					<div class="modal-body">
						<div id="modal_content"><span class="fa-stack fa-lg mr-10" style=" color:#FC0"><i class="fa fa-exclamation-triangle fa-stack-2x"></i></span><span id="messageBoxSearch"></span></div>
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="getFocus();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Dialog Show เมื่อไม่พบข้อมูลทะเบียนผู้ใช้น้ำ ที่ต้องการจะแก้ไข -->
		<div class="modal fade" id="checkResultModal" tabindex="-1"
			role="dialog" aria-labelledby="failModal" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">เกิดข้อผิดพลาด</h4>
					</div>
					<div class="modal-body">
						<span class="fa-stack fa-lg mr-10" style=" color:#FC0"><i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>ไม่สามารถยกเลิกข้อมูลใบเสร็จรับเงินได้ เนื่องจากไม่พบข้อมูลเลขที่ใบเสร็จรับเงิน
					</div>
					<div class="modal-footer" style="text-align: center;">
						<button type="button" class="btn btn-primary" onclick="getFocus();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Dialog Show กรุณาระบุเหตุผลของการยกเลิกใบเสร็จรับเงิน -->
	<div class="modal fade" id="checkCommentModal" tabindex="-1" role="dialog"
		aria-labelledby="failModal" aria-hidden="true">
		<div class="modal-dialog" style="width: 400px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">ตรวจสอบข้อมูลให้ถูกต้อง</h4>
				</div>
				<div class="modal-body">
					<p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณาระบุเหตุผลของการยกเลิกใบเสร็จรับเงิน</p>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button type="button" class="btn btn-primary" onclick="cancel();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Dialog Show ยืนยันการยกเลิกใบเสร็จรับเงิน -->
	<div class="modal fade" id="confirmCancelModal" tabindex="-1" role="dialog"
		aria-labelledby="reasonModal" aria-hidden="true">
		<div class="modal-dialog" style="width: 400px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">ยกเลิกข้อมูล</h4>
				</div>
				<div class="modal-body">
					<p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>ยืนยันการยกเลิกใบเสร็จรับเงิน</p>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button type="button" class="btn btn-primary" onclick="save();" ><i class="fa fa-floppy-o"></i> ตกลง</button>
					<button type="button" class="btn btn-danger" onclick="cancel();"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Dialog Show เมื่อผู้ใช้งานยกเลิกข้อมูลสำเร็จ -->
	<div class="modal fade" id="successModal" tabindex="-1"
		role="dialog" aria-labelledby="failModal" aria-hidden="true">
		<div class="modal-dialog" style="width: 400px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">ยกเลิกข้อมูลสำเร็จ</h4>
				</div>
				<div class="modal-body">
					<p><span class="fa-stack fa-lg mr-10" style="color:#0C0"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-check fa-stack-1x fa-inverse"></i> </span>
					ยกเลิกข้อมูลการใบเสร็จรับเงินสำเร็จ</p>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button type="button" class="btn btn-primary" onclick="getClose();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Dialog Show เมื่อผู้ใช้งานยกเลิกข้อมูลเกิดข้อผิดพลาด -->
	<div class="modal fade" id="failModal" tabindex="-1"
		role="dialog" aria-labelledby="failModal" aria-hidden="true">
		<div class="modal-dialog" style="width: 400px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">เกิดข้อผิดพลาด</h4>
				</div>
				<div class="modal-body">
					<p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>
					ยกเลิกข้อมูลการใบเสร็จรับเงินเกิดข้อผิดพลาด</p>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button type="button" class="btn btn-primary" onclick="cancel();"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>
				</div>
			</div>
		</div>
	</div>

	<!-- JAVASCRIPT -->
<!-- 	<script type="text/javascript" src="assets/js/jquery.min.js"></script> -->
<!-- 	<script type="text/javascript" src="assets/js/bootstrap.min.js"></script> -->
<!-- 	<script type="text/javascript" -->
<!-- 		src="assets/js/bootstrap-datetimepicker.min.js"></script> -->
<!-- 	<script type="text/javascript" src="assets/js/script.js"></script> -->
<!-- <!-- 	<script type="text/javascript"> --> 
<!-- // 		$(document).ready(function(e) { -->
<!-- // 			$('#myModal').on('hidden.bs.modal', function(e) { -->
<!-- // 				location.reload(); -->
<!-- // 			}); -->
<!-- // 		}); -->
		
<!-- // 		function checkForm() { -->

<!-- // 			if ($('#remark').val() == '') { -->
<!-- // 				$('#remark').css('border-color', '#F00'); -->
<!-- // 				$('#remark').focus(); -->
<!-- // 				$('#alert-box').show(); -->
<!-- // 				$(document).scrollTop(100) -->
<!-- // 			} else { -->
<!-- // 				$('#remark').css('border-color', 'green'); -->
<!-- // 				$('#myModal').modal('show'); -->
<!-- // 			} -->

<!-- // 		} -->
<!-- <!-- 	</script> -->
</body>
</html>